<?xml version="1.0" encoding="UTF-8"?>

<!--
    Document   : productTable.xsl
    Created on : April 1, 2013, 8:34 PM
    Author     : Thinh
    Description:
        Purpose of transformation follows.
-->

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
            xmlns:i="http://xml.netbeans.org/schema/image">
    <xsl:output method="html" indent="yes"/>

    <xsl:param name="fieldToSort" />
    <xsl:param name="sortCondition" />
    <xsl:param name="dataType" />
    <xsl:template match="/">
        <table class="data display datatable" id="tblProduct">
            <thead>
                <tr>
                    <td class="sorting_none" rowspan="1" colspan="1" style="width : 23px">Id</td>
                    <td class="sorting_none" rowspan="1" colspan="1" style="width : 30px">Image</td>
                    <td class="sorting" id="tdName" onclick="sortProduct('name', 'tdName', 'text')" rowspan="1" colspan="1" style="width: 165px">Name</td>
                    <td class="sorting" id="tdPrice" onclick="sortProduct('price', 'tdPrice', 'number')" rowspan="1" colspan="1" stype="width: 265px">Price</td>
                    <td class="sorting" id="tdQuantity" onclick="sortProduct('quantity', 'tdQuantity', 'number')" rowspan="1" colspan="1" stype="width: 265px">Quantity</td>
                    <td class="sorting_none" rowspan="1" colspan="1" stype="width: 265px">Is Showed</td>
                    <td class="sorting_none" rowspan="1" colspan="1" stype="width: 265px">Is Deleted</td>
                    <td class="sorting_none" rowspan="1" colspan="1"></td>
                    <td class="sorting_none" rowspan="1" colspan="1"></td>
                </tr>
            </thead>
            <tbody>`
                <xsl:for-each  select="products/product">
                    <xsl:sort select="@*[name()=$fieldToSort] | *[name()=$fieldToSort]" data-type="{$dataType}" order="{$sortCondition}"/>
                    <tr class="odd">
                        <td>
                            <xsl:value-of select="position()"/>
                        </td>
                        <td id="image">
                            <img  height="100px" width="130px">
                                <xsl:attribute name="src">
                                    <xsl:value-of select='images/image/i:url'/>
                                </xsl:attribute>
                            </img>
                        </td>
                        <td id="name">
                            <xsl:value-of select="name"/>
                        </td>
                        <td id="price">
                            <xsl:value-of select="price"/>
                        </td>
                        <td id="quantity">
                            <xsl:value-of select="quantity"/>
                        </td>
                        <td id="isShowed">
                            <xsl:if test="isshowed = 'false'">
                                <input disabled="disabled" id="isShowed"  type="checkbox" name="deleted" value="false"/>
                            </xsl:if>
                            <xsl:if test="isshowed = 'true'">
                                <input disabled="disabled" id="isShowed" checked="checked" type="checkbox" name="deleted" value="true"/>
                            </xsl:if>
                        </td>
                        <td id="isDeleted">
                            <xsl:if test="isdeleted = 'false'">
                                <input disabled="disabled" id="isDeleted"  type="checkbox" name="deleted" value="false"/>
                            </xsl:if>
                            <xsl:if test="isdeleted = 'true'">
                                <input disabled="disabled" id="isDeleted" checked="checked" type="checkbox" name="deleted" value="true"/>
                            </xsl:if>
                        </td>
                        <td>
                            <form id="updateProductForm_{position()}" action="" method="POST" enctype="multipart/form-data" onsubmit="updateProduct({position()}); return false;">
                                <a href="#product_form{@id}" style="text-decoration:none" onclick="updateProductEvent({position()})">Update</a>
                                <a href="#x" class="overlay" id="product_form{@id}"></a>
                                <div id= "product_{position()}" class="popup">
                                    <input type="hidden" name="id" value="{@id}" />
                                    <h2>View
                                        <xsl:value-of select="name"/>'s Information
                                    </h2>
                                    <div>
                                        <label for="name"> Name(*): </label>
                                        <input title="6 to 30 characters" type="text" name="name" maxlength="30" required="required">
                                            <xsl:attribute name="value">
                                                <xsl:value-of select='name'/>
                                            </xsl:attribute>
                                        </input>
                                    </div>
                                    <div>
                                        <label for="price"> Price(*): </label>
                                        <input  title="No vnd sign and no comma" type="text" name="price" maxlength="20"  required="required">
                                            <xsl:attribute name="value">
                                                <xsl:value-of select='price'/>
                                            </xsl:attribute>
                                        </input>
                                    </div>
                                    <div>
                                        <label for="quantity"> Quantity(*): </label>
                                        <input title="max 30 characters" type="number" min="1" max="1000" name="quantity" required="required">
                                            <xsl:attribute name="value">
                                                <xsl:value-of select='quantity'/>
                                            </xsl:attribute>
                                        </input>
                                    </div>
                                    <div>
                                        <label for="category"> Category: </label>
                                        <select id="category_{@id}" name="category" onclick="loadCategory(id)">
                                            <option>
                                                <xsl:attribute name="value">
                                                    <xsl:value-of select='category/@id'/>
                                                </xsl:attribute>
                                                <xsl:value-of select='category/name'/>
                                            </option>
                                        </select>
                                    </div>
                                    <div>
                                        <label for="address"> Is Showed: </label>
                                        <xsl:if test="isshowed = 'false'">
                                            <input id="isShowed"  type="checkbox" name="showed" value="false"/>
                                        </xsl:if>
                                        <xsl:if test="isshowed = 'true'">
                                            <input id="isShowed" checked="checked" type="checkbox" name="showed" value="true"/>
                                        </xsl:if>
                                    </div>
                                    <div>
                                        <label for="isDeleted"> Is Deleted: </label>
                                        <xsl:if test="isdeleted = 'false'">
                                            <input id="isDeleted"  type="checkbox" name="deleted" value="false"/>
                                        </xsl:if>
                                        <xsl:if test="isdeleted = 'true'">
                                            <input id="isDeleted" checked="checked" type="checkbox" name="deleted" value="true"/>
                                        </xsl:if>
                                    </div>
                                    <div>
                                        <label for="fileChooseUpdate_{position()}">Files to upload</label>
                                        <input type="file" id="filesToUploadUpdate_{position()}" name="files"   accept="image/*"/>
                                        <div id="filedragUpdate">
                                            <div id="filedragUpdate_{position()}" name="file">
                                            <label id="message">or drop your file here</label>
                                        </div>
                                        </div>
                                        <div id="imageResultUpdaed">
                                            <img id="resultImageUpdate_{position()}" name="imageUpdate" hidden="true" height="100px" width="200px"/>
                                        </div>
                                        <input type="hidden" id="namePictureUpdate_{position()}" value="" name="images"/>
                                    </div>
                                    <input type="submit"  id="btnUpdateProduct" value="Update">
<!--                                        <a class="button" href="#close" onclick="loadUserXMlFile({position()})">Update</a>-->
                                    </input>
                                    <a class="close" id="close" href="#"></a>
                                </div>
                            </form>
                        </td>
                        <td>
                            <xsl:if test="isdeleted = 'false'">
                                <a href="#" id="{@id}_deleted" onclick="deleteProduct({@id}, {position()})" style="text-decoration:none">Delete</a>
                            </xsl:if>
                            <xsl:if test="isdeleted = 'true'">
                                <a href="#" id="{@id}_deleted" onclick="deleteProduct({@id}, {position()})" style="text-decoration:none">UnDelete</a>
                            </xsl:if>
                        </td>
                    </tr>
                </xsl:for-each>
            </tbody>
        </table>
    </xsl:template>
</xsl:stylesheet>
